<template>
  <!--<div class="polSelectBody" :class="{hidePolSelectBody: hide}">-->
    <div class="polSelectContent">
      <div class="polSelectContentHead">
        <span>鼎诚人寿重疾险</span>
        <span class="closePolSelect" @click="closePolSelect">✖</span>
      </div>
      <div class="polSelectContentBody">
        <div class="polSelectContentBodyContent">
          <!--<div class="nowPrice">-->
            <!--是否显示现价-->
            <!--<span :class="{nowPriceActive: showNowPriceActive}" class="showNowPrice" @click="nowPriceChange('S')">显示</span>-->
            <!--<span :class="{nowPriceActive: hideNowPriceActive}" class="hideNowPrice" @click="nowPriceChange('H')">不显示</span>-->
          <!--</div>-->
          <div class="polCheckContent">
            <pol-check v-if="!changePolData" :key="index" v-for="(item, index) in polCheckData" :polName="item.pname"
                       :showPicker="true" :checkDisabled="item.checkDisabled" :pid="item.pid"
                       :periodList="item.periodList" :checked="item.checked" :paymentPeriod="item.paymentPeriod"
                       :transportList="item.transportListData" :premium="item.premium" :calculateType="item.calculateType"
                       :guaranteeType="item.guaranteeType" :quota="item.quota" :counts="item.counts" :expiration="item.expiration"
                       :polIndex="index" v-on:getCheckStatus="checkChange" :changePremium="changePremium"
                       v-on:setData="changeData">
            </pol-check>
          </div>
        </div>
      </div>
      <div class="polSelectContentBottom">
        <div class="sureButton" @click="calculate">
          <span>确定</span>
        </div>
      </div>
    </div>
  <!--</div>-->
</template>

<script>
import PolCheck from './polCheck'
import { Toast } from 'mint-ui'
export default {
  name: 'polSelect',
  components: {PolCheck},
  props: ['hide', 'selectPolData', 'changePol'],
  data () {
    return {
      showNowPriceActive: true,
      hideNowPriceActive: false,
      polCheckData: [],
      changePolData: false,
      changePremium: ''
    }
  },
  mounted () {
    this.handleSelectPolData()
  },
  methods: {
    handleClick () {},
    handleSelectPolData () {
      this.polCheckData = []
      if (this.selectPolData) {
        let selectPolData = JSON.parse(JSON.stringify(this.selectPolData))
        for (let item of selectPolData) {
          // if (item.check === true && item.type === 'optional') {
          //   item.checkDisabled = false
          //   item.checked = true
          // } else if (item.type === 'require') {
          //   item.checkDisabled = 'checkDisabled'
          // } else if (item.type === 'optional' && !item.check) {
          //   item.checkDisabled = 'unCheckDisabled'
          // }
          // if (item.pid !== 'P0007') {
          //   item.periodList.push('pOne')
          // }
          if (item.pid === 'P0008') {
            item.periodList.push('ptnt')
          }
          this.polCheckData.push(item)
        }
      }
    },
    deepClone (obj) {
      let objClone = Array.isArray(obj) ? [] : {}
      if (obj && typeof obj === 'object') {
        for (let key in obj) {
          if (obj.hasOwnProperty(key)) {
            // 判断ojb子元素是否为对象，如果是，递归复制
            if (obj[key] && typeof obj[key] === 'object') {
              objClone[key] = this.deepClone(obj[key])
            } else {
              // 如果不是，简单复制
              objClone[key] = obj[key]
            }
          }
        }
      }
      return objClone
    },
    nowPriceChange (item) {
      if (item === 'S') {
        this.showNowPriceActive = true
        this.hideNowPriceActive = false
      } else if (item === 'H') {
        this.showNowPriceActive = false
        this.hideNowPriceActive = true
      }
    },
    closePolSelect () {
      this.$emit('setHide', true)
    },
    checkChange (status, index, pid) {
      this.$emit('getCheckStatus', status, index, pid)
    },
    calculate () {
      for (let item of this.selectPolData) {
        if (item.pid === 'P0007' && item.premium < 50000) {
          let pName = ''
          if (item.expiration === 'all') {
            pName = '鼎康保终身重大疾病保险'
          } else {
            if (item.expiration.indexOf('B') > 0) {
              pName = '鼎康保定期重疾B款'
            } else {
              pName = '鼎康保定期重疾A款'
            }
          }
          Toast(`${pName}最低保额为5万元`)
          return false
        }
        if (item.pid === 'P0017' && item.premium < 50000) {
          Toast(`鼎诚附加特定心脑血管疾病保险最低保额为5万元`)
          return false
        }
        if (item.pid === 'P0009' && item.premium < 50000) {
          Toast(`附加意外伤害保险最低保额为5万元`)
          return false
        }
        if ((!item.premium || item.premium === '0') && item.checked && item.pid !== 'P0010') {
          Toast('请填写保额')
          return false
        }
        if (item.pid === 'P0010' && item.checked && !item.transportListData.length) {
          Toast('请选择交通工具')
          return false
        }
      }
      this.$emit('calculate')
    },
    changeData (type, pid, data) {
      if (type === 'paymentPeriod') {
        for (let i = 0; i < this.selectPolData.length; i++) {
          if (this.selectPolData[i].pid === 'P0008') {
            let item = this.selectPolData[i]
            if (item.select && data !== 'pw') {
              item.checked = true
              item.check = true
              item.checkDisabled = false
            }
            let specialPaymentPeriod
            switch (data) {
              case 'pf':
                specialPaymentPeriod = 'pfo'
                break
              case 'pt':
                specialPaymentPeriod = 'pn'
                break
              case 'pfif':
                specialPaymentPeriod = 'pfot'
                break
              case 'pytw':
                specialPaymentPeriod = 'pnt'
                break
              case 'ptt':
                specialPaymentPeriod = 'ptnt'
                break
              case 'pw':
                item.checked = false
                item.check = false
                item.checkDisabled = 'unCheckDisabled'
                break
            }
            item[type] = specialPaymentPeriod
            this.$set(this.selectPolData, i, item)
          } else if (this.selectPolData[i].pid === 'P0007') {
            let item = this.selectPolData[i]
            item[type] = data
            this.$set(this.selectPolData, i, item)
          }
        }
        this.$emit('changePaymentPeriod', data)
      } else if (type === 'premium' && pid === 'P0007') {
        for (let i = 0; i < this.selectPolData.length; i++) {
          let item = this.selectPolData[i]
          if (item.pid === pid || item.pid === 'P0009' || item.pid === 'P0010' || item.pid === 'P0017') {
            item[type] = data
            this.$set(this.selectPolData, i, item)
          }
        }
        this.changePremium = data
      } else {
        for (let i = 0; i < this.selectPolData.length; i++) {
          let item = this.selectPolData[i]
          if (item.pid === pid) {
            item[type] = data
            this.$set(this.selectPolData, i, item)
          }
        }
      }
    }
  },
  watch: {
    changePol (val) {
      this.changePolData = true
      this.handleSelectPolData()
      this.$nextTick(() => (
        this.changePolData = false
      ))
    },
    selectPolData (val) {
      this.polCheckData = []
      // if (val) {
      //   let selectPolData = JSON.parse(JSON.stringify(val))
      //   for (let item of selectPolData) {
      //     if (item.type === 'require') {
      //       item.checkDisabled = 'checkDisabled'
      //     }
      //     this.polCheckData.push(item)
      //   }
      // }
      this.handleSelectPolData()
    },
    hide (val) {
      if (val) {
        document.body.style.position = ''
      } else {
        document.body.style.position = 'fixed'
      }
    }
  }
}

</script>

<style scoped>
  .polSelectBody {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0 ,0.3);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99;
    transition: .15s ease-out;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  .hidePolSelectBody {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .polSelectContent {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #eeeeee;
    overflow: hidden;
  }
  .polSelectContentHead {
    position: fixed;
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: #ffffff;
    font-size: 16px;
    z-index: 2;
  }
  .closePolSelect {
    position: absolute;
    font-size: 20px;
    line-height: 50px;
    right: 30px;
  }
  .polSelectContentBottom {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    font-size: 16px;
    bottom: 0;
    z-index: 2;
  }
  .sureButton {
    width: 95%;
    height: 80%;
    position: absolute;
    text-align: center;
    left: 2.5%;
    top: 10%;
    background-color: #3040ff;
    color: #ffffff;
    border-radius: 5px;
    line-height: 40px;
    letter-spacing: 5px;
  }
  .polSelectContentBody {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 50px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .polSelectContentBodyContent {
    width: 95%;
    margin: 10px auto;
    overflow: hidden;
    background-color: #eeeeee;
  }
  .nowPrice {
    padding: 12px 15px;
    font-size: 16px;
    position: relative;
    color: #535353;
    line-height: 27px;
    background-color: #ffffff;
  }
  .showNowPrice {
    width: 50px;
    height: 25px;
    border: 1px solid #c9c9c9;
    text-align: center;
    line-height: 25px;
    position: absolute;
    font-size: 14px;
    right: 85px;
  }
  .hideNowPrice {
    width: 60px;
    height: 25px;
    border: 1px solid #c9c9c9;
    text-align: center;
    line-height: 25px;
    position: absolute;
    font-size: 14px;
    right: 15px;
  }
  .nowPriceActive {
    color: #3f9aff;
    border: 1px solid #3f9aff;
  }
  .polCheckContent {
    margin-bottom: 10px;
    background-color: #ffffff;
  }
</style>
